<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片上传</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        success: '#10B981',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .backdrop-blur-sm {
                backdrop-filter: blur(4px);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="header">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cloud-upload text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">数据录入</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="admin_home.html" class="text-gray-600 hover:text-primary transition-colors duration-200">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">关于</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">帮助</a>
            </nav>
            <button class="md:hidden text-gray-600 focus:outline-none" id="mobile-menu-button">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-white shadow-md absolute w-full" id="mobile-menu">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#" class="text-gray-600 hover:text-primary py-2 border-b border-gray-100 transition-colors duration-200">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary py-2 border-b border-gray-100 transition-colors duration-200">关于</a>
                <a href="#" class="text-gray-600 hover:text-primary py-2 transition-colors duration-200">帮助</a>
            </div>
        </div>
    </header>

    <main class="flex-grow container mx-auto px-4 py-8">
        <section class="max-w-3xl mx-auto bg-white rounded-xl shadow-md p-6 md:p-8 transition-all duration-300 hover:shadow-lg">
            <div class="text-center mb-8">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-3">上传你的信息</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">点击下方按钮上传你的照片并输入姓名、密码，我们将为你生成一个包含个人信息的文件。</p>
            </div>

            <div class="flex flex-col items-center justify-center h-64 md:h-80 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 mb-8 transition-all duration-300 hover:border-primary group cursor-pointer" id="upload-area">
                <i class="fa fa-cloud-upload text-4xl md:text-5xl text-gray-400 group-hover:text-primary transition-colors duration-300 mb-4"></i>
                <h3 class="text-lg font-medium text-gray-600 group-hover:text-primary transition-colors duration-300">点击上传信息</h3>
            </div>

            <div class="text-center">
                <button id="upload-btn" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5 flex items-center justify-center mx-auto">
                    <i class="fa fa-upload mr-2"></i>
                    上传照片
                </button>
            </div>

            <!-- 上传结果区域 -->
            <div id="result-area" class="mt-8 hidden">
                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fa fa-check-circle text-green-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-green-800">上传成功</h3>
                            <div class="mt-2 text-sm text-green-700">
                                <p>JSON 文件已生成，你可以点击下方按钮下载。</p>
                            </div>
                            <div class="mt-4">
                                <button id="download-btn" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md shadow hover:shadow-md transition-all duration-200 flex items-center">
                                    <i class="fa fa-download mr-2"></i>
                                    下载 JSON 文件
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 弹窗 -->
    <div id="upload-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">上传照片</h3>
                    <button id="close-modal" class="text-gray-400 hover:text-gray-500 focus:outline-none transition-colors duration-200">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <form id="upload-form" class="space-y-4">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                        <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200" placeholder="请输入你的姓名" required>
                    </div>
					<div>
					    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
					    <input type="password" id="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200" placeholder="请输入你的密码" required>
					</div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">照片</label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-primary transition-colors duration-200 cursor-pointer" id="photo-upload-area">
                            <div class="space-y-1 text-center">
                                <i class="fa fa-cloud-upload text-gray-400 text-3xl"></i>
                                <div class="flex text-sm text-gray-600">
                                    <label for="photo" class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80 transition-colors duration-200">
                                        <span>上传照片</span>
                                        <input id="photo" name="photo" type="file" accept="image/*" class="sr-only" required>
                                    </label>
                                    <p class="pl-1">或拖放文件</p>
                                </div>
                                <p class="text-xs text-gray-500">
                                    PNG, JPG (最大: 5MB)
                                </p>
                            </div>
                        </div>
                        <div id="photo-preview" class="hidden mt-3">
                            <img id="preview-image" src="" alt="预览图" class="max-h-40 rounded-lg border border-gray-200">
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" id="cancel-upload" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                            取消
                        </button>
                        <button type="submit" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg shadow hover:shadow-md transition-all duration-200">
                            确定
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // DOM 元素
        const uploadBtn = document.getElementById('upload-btn');
        const uploadModal = document.getElementById('upload-modal');
        const modalContent = document.getElementById('modal-content');
        const closeModal = document.getElementById('close-modal');
        const cancelUpload = document.getElementById('cancel-upload');
        const uploadForm = document.getElementById('upload-form');
        const nameInput = document.getElementById('name');
		const passwordInput = document.getElementById('password');
        const photoInput = document.getElementById('photo');
        const photoUploadArea = document.getElementById('photo-upload-area');
        const photoPreview = document.getElementById('photo-preview');
        const previewImage = document.getElementById('preview-image');
        const resultArea = document.getElementById('result-area');
        const downloadBtn = document.getElementById('download-btn');
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const uploadArea = document.getElementById('upload-area');
        const header = document.getElementById('header');

        // 滚动效果
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-4');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2', 'shadow');
            }
        });

        // 移动端菜单
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 显示弹窗
        uploadBtn.addEventListener('click', () => {
            uploadModal.classList.remove('hidden');
            // 动画效果
            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        });

        // 隐藏弹窗
        function hideModal() {
            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                uploadModal.classList.add('hidden');
                // 重置表单
                uploadForm.reset();
                photoPreview.classList.add('hidden');
            }, 300);
        }

        closeModal.addEventListener('click', hideModal);
        cancelUpload.addEventListener('click', hideModal);

        // 点击弹窗外部关闭
        uploadModal.addEventListener('click', (e) => {
            if (e.target === uploadModal) {
                hideModal();
            }
        });

        // 照片预览
        photoInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    previewImage.src = event.target.result;
                    photoPreview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
        });

        // 拖放上传
        photoUploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            photoUploadArea.classList.add('border-primary', 'bg-blue-50');
        });

        photoUploadArea.addEventListener('dragleave', () => {
            photoUploadArea.classList.remove('border-primary', 'bg-blue-50');
        });

        photoUploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            photoUploadArea.classList.remove('border-primary', 'bg-blue-50');

            if (e.dataTransfer.files.length) {
                photoInput.files = e.dataTransfer.files;
                // 触发预览
                const event = new Event('change');
                photoInput.dispatchEvent(event);
            }
        });

        // 表单提交
        uploadForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            const name = nameInput.value.trim();
			const password = passwordInput.value.trim();
            const photoFile = photoInput.files[0];
            
            if (!name || !password||!photoFile) {
                alert('请填写姓名、密码并上传照片');
                return;
            }

            // 读取照片为Base64格式
            const reader = new FileReader();
            reader.onload = function(event) {
                const base64Image = event.target.result.split(',')[1]; // 去掉data:URL前缀
                
                // 创建JSON对象，格式为{"Name": 姓名, "Image": 照片Base64格式}
                const userData = {
                    "Name": name,
					"Password":password,
                    "Image": base64Image
                }; 

                // 转换为JSON字符串
                const jsonData = JSON.stringify(userData, null, 2);
                console.log(jsonData)
				fetch("http://127.0.0.1:5002/image",{
					method:"POST",
					headers:{
						"Content-Type":"application/json"
					},
					body:jsonData,
				})
				.then(response =>response.json())
				.then(data=>{
					alert(data.message)
					console.log(data.message)
				})
                // 隐藏弹窗
                hideModal();
                
                // 显示结果区域
                resultArea.classList.remove('hidden');
                
                // 下载按钮点击事件
                downloadBtn.addEventListener('click', () => {
                    const blob = new Blob([jsonData], { type: 'application/json' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `${name}_profile.json`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                });
            };
            reader.readAsDataURL(photoFile);
        });

        // 主区域点击上传
        uploadArea.addEventListener('click', () => {
            uploadBtn.click();
        });
    </script>
</body>
</html>
    